<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>需求分析介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">


<!-- 在现有的 col-sm-4 板块后添加新的滚动图像区域 -->
<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>动态</h5>
        </div>
        <div class="ibox-content" >
            <div id="imageCarousel" class="carousel slide" data-ride="carousel">
                <!-- 图像指示器 -->
                <ol class="carousel-indicators">
                    <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#imageCarousel" data-slide-to="1"></li>
                    <li data-target="#imageCarousel" data-slide-to="2"></li>
                </ol>

                <!-- 图像容器 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img th:src="@{/img/carousel1.png}" style="width:100%; height:200px;" alt="图像1">
                        <div class="carousel-caption">
                            <h3>专业</h3>
                            <p>需求分析</p>
                        </div>
                    </div>
                    <div class="item">
                        <img th:src="@{/img/carousel2.png}" style="width:100%; height:200px;" alt="图像2">
                        <div class="carousel-caption">
                            <h3>专注</h3>
                            <p>需求分析</p>
                        </div>
                    </div>
                    <div class="item">
                        <img th:src="@{/img/carousel3.png}" style="width:100%; height:200px;" alt="图像3">
                        <div class="carousel-caption">
                            <h3>专心</h3>
                            <p>需求分析</p>
                        </div>
                    </div>
                </div>

                <!-- 左右控制按钮 -->
                <a class="left carousel-control" href="#imageCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#imageCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
</div>



<!-- 添加在现有 col-sm-4 板块之前 -->
<div class="col-sm-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h3>个人在途需求数量</h3>
        </div>
        <div class="ibox-content">
            <div id="demandChart" style="height: 300px;"></div>
        </div>
    </div>
</div>




<!-- 添加在现有 col-sm-4 板块之前 -->
<div class="col-sm-8">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h3>部门在途需求数量</h3>
        </div>
        <div class="ibox-content">
            <div id="demandChart2" style="height: 300px;"></div>
        </div>
    </div>
</div>



<!-- 新增堆叠柱状图 -->
<div class="col-sm-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h3>个人需求数统计</h3>
        </div>
        <div class="ibox-content">
            <div id="personalDemandChart" style="height: 400px;"></div>
        </div>
    </div>
</div>



<!-- 新增总需求数饼状图 -->
<div class="col-sm-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h3>总需求数情况</h3>
        </div>
        <div class="ibox-content">
            <div id="totalDemandPieChart" style="height: 400px;"></div>
        </div>
    </div>
</div>

<!-- 新增近五周每周新增需求数图表 -->

<div class="col-sm-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h3>个人近五周每周新分配需求数</h3>
        </div>
        <div class="ibox-content">
            <div id="weeklyDemandsChart" style="height: 400px;"></div>
        </div>
    </div>
</div>





<div class="row border-bottom white-bg dashboard-header">

   <!-- <div class="col-sm-3">
        <h2>Hello,Guest</h2>

        <br>
        <br>
        <img th:src="@{/img/qr_code.png}" width="100%" style="max-width:264px;">
        <br>
    </div>-->
    <div class="col-sm-5">
        <h2>需求科管理平台</h2>
        <p>针对 需求科管理，提供一套简单易用的系统解决方案。系统会陆续更新一些实用功能。</p>
        <p>
            <b>当前版本：</b><span>v[[${version}]]</span>
        </p>
        <p>
            <span class="label label-warning">&yen;免费开源</span>
        </p>
        <br>
        <p>
            <a class="btn btn-success btn-outline" href="https://gitee.com/liujiah/zhoubao_data" target="_blank">
                <i class="fa fa-cloud"> </i> 访问码云
            </a>
        </p>
    </div>
    <div class="col-sm-4">
        <h4>技术选型：</h4>
        <ol>
            <li>核心框架：Spring Boot。</li>
            <li>安全框架：Apache Shiro。</li>
            <li>模板引擎：Thymeleaf。</li>
            <li>持久层框架：MyBatis。</li>
            <li>定时任务：Quartz。</li>
            <li>数据库连接池：Druid。</li>
            <li>工具类：Fastjson。</li>
            <li>更多……</li>
        </ol>
    </div>

</div>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-4">

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>联系信息</h5>

                </div>
                <div class="ibox-content">
                    <p><i class="fa fa-send-o"></i> 官网：<a href="http://xuqiu.icu" target="_blank">http://xuqiu.icu</a>
                    </p>
                    <p><i class="fa fa-qq"></i> QQ群：<a href="javascript:;">/ *需求</a>
                    </p>
                    <p><i class="fa fa-weixin"></i> 微信：<a href="javascript:;">/ *需求</a>
                    </p>

                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>更新日志</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div class="panel-body">
                        <div class="panel-group" id="version">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h5 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#version" href="#v481">v1.0.1</a><code
                                            class="pull-right">2025.09.20</code>
                                    </h5>
                                </div>
                                <div id="v481" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <ol>
                                            <li>新增CSRF防护功能</li>
                                            <li>Excel导入导出支持多图片</li>
                                            <li>其他细节优化</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="ibox-content no-padding">
                    <div class="panel-body">
                        <div class="panel-group" id="version2">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h5 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#version" href="#v481">v1.0.0</a><code
                                            class="pull-right">2025.09.19</code>
                                    </h5>
                                </div>
                                <div id="v4812" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <ol>
                                            <li>初始工程</li>
                                            <li>其他细节优化</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>其他</h5>
                </div>
                <div class="ibox-content">
                    <div class="alert alert-warning">
                        <pre>
            《需之道》

                        </pre>
                    </div>
           <!--         <p id="pay-qrcode">
                        <a href="javascript:;"><img th:src="@{/img/pay.png}" width="100%"
                                                    alt="请使用手机支付宝或者微信扫码支付">
                        </a>
                    </p>

-->
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- 引入 ECharts -->
    <script th:src="@{/js/echarts.min.js}"></script>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script type="text/javascript">
        $('#pay-qrcode').click(function () {
            var html = $(this).html();
            parent.layer.open({
                title: false,
                type: 1,
                closeBtn: false,
                shadeClose: true,
                area: ['600px', '360px'],
                content: html
            });
        });

        // 页面加载完成后初始化个人需求堆叠柱状图
        $(document).ready(function() {
            // 初始化图表
            var personalDemandChart = echarts.init(document.getElementById('personalDemandChart'));

            // 显示加载动画
            personalDemandChart.showLoading();

            // 通过 AJAX 获取数据
            $.ajax({
                url: '/zhoubao/base/listPersonal',
                type: 'POST',
                success: function(data) {
                    // 隐藏加载动画
                    personalDemandChart.hideLoading();
                    
                    // 处理数据
                    var xAxisData = [];
                    var totalData = [];
                    var weeklyData = [];

                    // 解析返回的数据
                    for (var i = 0; i < data.rows.length; i++) {
                        xAxisData.push(data.rows[i].name);
                        // 总需求数
                        totalData.push(data.rows[i].value || 0);
                        // 本周新增需求数
                        weeklyData.push(data.rows[i].extraValue || 0);
                    }

                    // 配置图表选项
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['总需求数', '本周新增需求数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '15%',  // 增加底部边距，给X轴标签更多空间
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: xAxisData,
                                axisLabel: {
                                    // 设置标签样式，可以进一步调整位置
                                    margin: 20  // 增加标签与轴线的距离
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '总需求数',
                                type: 'bar',
                                stack: '需求数',
                                barWidth: '60%',
                                data: totalData,
                                itemStyle: {
                                    normal: {
                                        color: '#409EFF'
                                    }
                                }
                            },
                            {
                                name: '本周新增需求数',
                                type: 'bar',
                                stack: '需求数',
                                data: weeklyData,
                                itemStyle: {
                                    normal: {
                                        color: '#67C23A'
                                    }
                                }
                            }
                        ]
                    };

                    // 使用配置项显示图表
                    personalDemandChart.setOption(option);
                },
                error: function() {
                    personalDemandChart.hideLoading();
                    personalDemandChart.setOption({
                        title: {
                            text: '数据加载失败',
                            x: 'center',
                            y: 'center',
                            textStyle: {
                                fontSize: 20,
                                color: '#999'
                            }
                        }
                    });
                }
            });

            // 监听窗口大小改变，自适应图表大小
            window.addEventListener("resize", function () {
                personalDemandChart.resize();
            });
        });

        // 页面加载完成后初始化近五周每周新增需求数图表
        $(document).ready(function() {
            // 初始化图表
            var weeklyDemandsChart = echarts.init(document.getElementById('weeklyDemandsChart'));

            // 显示加载动画
            weeklyDemandsChart.showLoading();

            // 通过 AJAX 获取数据
            $.ajax({
                url: '/zhoubao/base/listWeeklyDemands',
                type: 'POST',
                success: function(data) {
                    // 隐藏加载动画
                    weeklyDemandsChart.hideLoading();
                    
                    // 处理数据
                    var persons = [];
                    var seriesData = [];
                    var weeks = ['本周', '上周', '前2周', '前3周', '前4周'];

                    // 解析返回的数据
                    for (var i = 0; i < data.rows.length; i++) {
                        persons.push(data.rows[i].name);
                    }

                    // 为每个人创建一个堆叠柱状图系列
                    for (var i = 0; i < data.rows.length; i++) {
                        seriesData.push({
                            name: data.rows[i].name,
                            type: 'bar',
                            stack: '总量',
                            data: [
                                data.rows[i].value || 0,
                                data.rows[i].extraValue || 0,
                                data.rows[i].extraValue2 || 0,
                                data.rows[i].extraValue3 || 0,
                                data.rows[i].extraValue4 || 0
                            ],
                            itemStyle: {
                                normal: {
                                    color: '#' + Math.floor(Math.random()*16777215).toString(16)
                                }
                            }
                        });
                    }

                    // 添加一个折线图系列显示总量趋势
                    var totalData = [0, 0, 0, 0, 0];
                    for (var i = 0; i < data.rows.length; i++) {
                        totalData[0] += data.rows[i].value || 0;
                        totalData[1] += data.rows[i].extraValue || 0;
                        totalData[2] += data.rows[i].extraValue2 || 0;
                        totalData[3] += data.rows[i].extraValue3 || 0;
                        totalData[4] += data.rows[i].extraValue4 || 0;
                    }

                    seriesData.push({
                        name: '总量趋势',
                        type: 'line',
                        data: totalData,
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: '#333'
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 3
                            }
                        }
                    });

                    // 配置图表选项
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: persons.concat(['总量趋势'])
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: weeks
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: seriesData
                    };

                    // 使用配置项显示图表
                    weeklyDemandsChart.setOption(option);
                },
                error: function() {
                    weeklyDemandsChart.hideLoading();
                    weeklyDemandsChart.setOption({
                        title: {
                            text: '数据加载失败',
                            x: 'center',
                            y: 'center',
                            textStyle: {
                                fontSize: 20,
                                color: '#999'
                            }
                        }
                    });
                }
            });

            // 监听窗口大小改变，自适应图表大小
            window.addEventListener("resize", function () {
                weeklyDemandsChart.resize();
            });
        });

        // 页面加载完成后初始化图表1
        $(document).ready(function() {
            // 初始化图表
            var demandChart = echarts.init(document.getElementById('demandChart'));

            // 显示加载动画
            demandChart.showLoading();

            // 通过 AJAX 获取数据
            $.ajax({
                url: '/zhoubao/base/list', // 需要后端提供此接口
                type: 'POST',
                success: function(data) {
                    // 隐藏加载动画
                    demandChart.hideLoading();
                    // 打印返回的数据到控制台
                    console.log('返回的图表数据:', data);
                    // 处理数据
                    var xAxisData = [];
                    var seriesData = [];

                    // 假设返回的数据格式为 [{name: '类型1', value: 10}, {name: '类型2', value: 15}]
                  //  for (var i = 0; i < data.rows.length; i++) {
                    for (var i = 0; i < data.rows.length; i++) {
                        xAxisData.push(data.rows[i].name);
                        seriesData.push(data.rows[i].value);
                    }

                    // 配置图表选项
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: xAxisData,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '需求数量',
                                type: 'bar',
                                barWidth: '60%',
                                data: seriesData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#83bff6'},
                                                {offset: 0.5, color: '#188df0'},
                                                {offset: 1, color: '#188df0'}
                                            ]
                                        )
                                    }
                                }
                            }
                        ]
                    };

                    // 使用配置项显示图表
                    demandChart.setOption(option);
                },
                error: function() {
                    demandChart.hideLoading();
                    demandChart.setOption({
                        title: {
                            text: '数据加载失败',
                            x: 'center',
                            y: 'center',
                            textStyle: {
                                fontSize: 20,
                                color: '#999'
                            }
                        }
                    });
                }
            });
        });





        // 页面加载完成后初始化图表2
        $(document).ready(function() {
            // 初始化图表
            var demandChart2 = echarts.init(document.getElementById('demandChart2'));

            // 显示加载动画
            demandChart2.showLoading();

            // 通过 AJAX 获取数据
            $.ajax({
                url: '/zhoubao/base/list2', // 需要后端提供此接口
                type: 'POST',
                success: function(data) {
                    // 隐藏加载动画
                    demandChart2.hideLoading();
                    // 打印返回的数据到控制台
                    console.log('返回的图表数据:', data);
                    // 处理数据
                    var xAxisData = [];
                    var seriesData = [];

                    // 假设返回的数据格式为 [{name: '类型1', value: 10}, {name: '类型2', value: 15}]
                    //  for (var i = 0; i < data.rows.length; i++) {
                    for (var i = 0; i < data.rows.length; i++) {
                        xAxisData.push(data.rows[i].name);
                        seriesData.push(data.rows[i].value);
                    }

                    // 配置图表选项
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: xAxisData,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '需求数量',
                                type: 'bar',
                                barWidth: '45%',
                                data: seriesData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#a8e6cf'},
                                                {offset: 0.5, color: '#6bbe8d'},
                                                {offset: 1, color: '#3a9b6d'}
                                            ]
                                        )
                                    }
                                }
                            }
                        ]
                    };

                    // 使用配置项显示图表
                    demandChart2.setOption(option);
                },
                error: function() {
                    demandChart2.hideLoading();
                    demandChart2.setOption({
                        title: {
                            text: '数据加载失败',
                            x: 'center',
                            y: 'center',
                            textStyle: {
                                fontSize: 20,
                                color: '#999'
                            }
                        }
                    });
                }
            });
        });


        // 页面加载完成后初始化总需求数饼状图(图5)
        $(document).ready(function() {
            // 初始化图表
            var totalDemandPieChart = echarts.init(document.getElementById('totalDemandPieChart'));

            // 显示加载动画
            totalDemandPieChart.showLoading();

            // 通过 AJAX 获取数据
            $.ajax({
                url: '/zhoubao/base/listcount', // 使用已有的list接口获取数据
                type: 'POST',
                success: function(data) {
                    // 隐藏加载动画
                    totalDemandPieChart.hideLoading();

                    // 处理数据
                    var pieData = [];

                    // 解析返回的数据
                    for (var i = 0; i < data.rows.length; i++) {
                        pieData.push({
                            name: data.rows[i].name,
                            value: data.rows[i].value || 0
                        });
                    }

                    // 配置图表选项
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: pieData.map(item => item.name)
                        },
                        series: [
                            {
                                name: '需求数量',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                data: pieData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    show: true,
                                    formatter: '{b}: {c} ({d}%)'
                                },
                                labelLine: {
                                    show: true
                                }
                            }
                        ]
                    };

                    // 使用配置项显示图表
                    totalDemandPieChart.setOption(option);
                },
                error: function() {
                    totalDemandPieChart.hideLoading();
                    totalDemandPieChart.setOption({
                        title: {
                            text: '数据加载失败',
                            x: 'center',
                            y: 'center',
                            textStyle: {
                                fontSize: 20,
                                color: '#999'
                            }
                        }
                    });
                }
            });

            // 监听窗口大小改变，自适应图表大小
            window.addEventListener("resize", function () {
                totalDemandPieChart.resize();
            });
        });




    </script>

</body>
</html>
